<template>
	<view>
		<view style="text-align: center;padding: 20rpx;">
			<view style="font-size: 30rpx;text-align: left;padding: 20rpx;line-height: 70rpx;">
				<text style="font-size: 50rpx;font-weight: 550;">注册{{a==0?'个人':'企业'}}账号</text><br />
				<text>欢迎使用预约访客</text><br />
				<text style="margin: 30rpx 0 10rpx 0;display: block;">手机号码</text>
				<view
					style="display: flex;justify-content: flex-start;align-items: center;padding: 10rpx;background-color: #f2f7fb;border-radius: 20rpx;">
					<text style="width: 15%;margin-left: 20rpx;">+86 |</text>
					<input v-model="user.phone" style="font-size: 30rpx;width: 100%;" type="text"
						placeholder="请输入手机号码" />
				</view>
				<text style="line-height: 80rpx;">验证码</text>
				<view
					style="display: flex;justify-content: flex-start;align-items: center;padding: 10rpx;background-color: #f2f7fb;border-radius: 20rpx;height: 70rpx;">
					<input v-model="user.testcode" style="font-size: 30rpx;width: 70%;margin-left: 20rpx;" type="text"
						placeholder="请输入验证码" />
					<view style="width: 30%;">
						<u-code ref="uCode" @change="codeChange" seconds="20"></u-code>
						<u-button style="background-color: #f2f7fb;border: none;color: #2984f8;" @tap="getCode"
							:text="tips" type="success" size="mini"></u-button>
					</view>
				</view>
				<text style="line-height: 80rpx;">密码</text>
				<view
					style="display: flex;justify-content: flex-start;align-items: center;padding: 10rpx;background-color: #f2f7fb;border-radius: 20rpx;height: 70rpx;">
					<input v-model="user.password"
						style="line-height: 70rpx;font-size: 30rpx;width: 70%;margin-left: 20rpx;" type="password"
						placeholder="请输入密码" />
				</view>
				<view style="display: flex;justify-content: space-between;margin: 20rpx 0;">
					<view style="display: flex;justify-content: flex-start;">
						<u-checkbox-group placement="row">
							<u-checkbox @change="checkbox" activeColor="#2778ff" labelSize="10" label="我已阅读并同意">
							</u-checkbox>
						</u-checkbox-group>
						<text style="font-size: 10px;color: #007AFF;">《用户隐私政策》</text>
					</view>
				</view>
				<button @click="registerInfo" type="default"
					style="background-color: #007AFF;color: #ffffff;">立即注册</button>
				<view style="display: flex;justify-content: center;color: #007AFF;margin-top: 20rpx;">
					<text @click="tologin">已有账号，去登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a: 0,
				tips: '',
				checkboxChecked: false,
				user: { //注册参数
					phone: '',
					testcode: '',
					password: ''
				}
			}
		},
		onLoad: function(e) {
			this.a = Number(e.a)
		},
		methods: {
			registerInfo() {
				if (this.user.phone.length == 0) {
					uni.$u.toast('请输入手机号')
				} else if (this.user.testcode.length == 0) {
					uni.$u.toast('请输入验证码')
				} else if (this.user.password.length == 0) {
					uni.$u.toast('请输入密码')
				} else if (!this.checkboxChecked) {
					uni.$u.toast('同意用户协议后才可以登录！')
				} else {
					if (this.a == 0) {
						// 个人用户注册接口

						// 成功回调
						this.tologin()
					} else {
						// 企业用户注册接口

						// 成功回调
						this.tologin()
					}

				}
			},
			// 返回登录页
			tologin() {
				uni.navigateBack()
			},
			checkbox() {
				this.checkboxChecked = !this.checkboxChecked
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			}
		}
	}
</script>

<style>

</style>
